<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- 
    vue指令: vue中自定义一些标签属性, 都以v-开头
        作用: 对所在标签对象进行特定操作
    v-bind:  强制绑定 / 动态绑定
      原始语法:  v-bind:属性名="表达式"
      简写语法 :  :属性名="表达式"
      作用: 指定动态的属性值
    可以作用于任意标签(html/组件标签)的任意属性(html内置的/自定义)

    React中对应的语法 : 
      <img src={imgUrl} title={imgTitle} alt="" xxx={yyy}>
  -->
  <div id="test">
    <img v-bind:src="imgUrl" :title="imgTitle" alt="" :xxx="yyy">
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#test",
      data: {
        imgUrl: 'http://www.atguigu.com/images/index_new/logo.png',
        imgTitle: '这是LOGO图片',
        yyy: 'atguigu'
      }
    })

    setTimeout(() => {
      // 更新一下数据
      vm.imgUrl = 'https://img1.baidu.com/it/u=2062257800,3249056813&fm=253&fmt=auto&app=138&f=PNG?w=879&h=287'
      vm.imgTitle = '随便标题'
    }, 1000);
  </script>
</body>
</html>